import { Tabs } from 'antd-mobile'
import axios from 'axios'
import { useCallback, useEffect, useRef, useState } from 'react'
import jiant from '../../img/6.png'
import { throttle } from 'lodash'
import './index.scss'
const TabAllList = () => {
    const tabItems = [
        { key: 'default', title: '全部' },
        { key: 'time', title: '新品' },
        { key: 'remark', title: '评价' },
        { key: 'price', title: '评价' }
    ]
    const [keychange, setKeychange] = useState('default')
    const [allList, setAlllist] = useState([])
    const [end, setEnd] = useState(false)
    const [text, setText] = useState(false)
    const pageRef = useRef(1)
    let total = useRef(0)
    const [activeIndex, setActiveIndex] = useState(0)
    const changekeyfn = useCallback((key) => {
        setKeychange(key)
        const index = tabItems.findIndex(item => item.key === key)
        setActiveIndex(index)
        axios.get(`/mcp/getCategoryPrdList?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&cid=98&pageNumber=1&pagesize=20&sortField=${key}&sortType=desc&cidLevel=1`).then(res => {
            setAlllist(res.data.cidPrdMap[98])
        })
    }, [tabItems, setKeychange])
    const GetDate = useCallback(() => {

        if (total.current >= pageRef.current) {
            axios.get(`/mcp/getCategoryPrdList?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&cid=98&pageNumber=${pageRef.current}&pagesize=20&sortField=${keychange}&sortType=desc&cidLevel=1`).then(res => {
                let data = res.data.cidPrdMap[98]
                setAlllist((allList) => [...allList, ...data])
            })
        }
    }, [total])
    useEffect(() => {
        axios.get('/mcp/getCategoryPrdList?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&cid=98&pageNumber=1&pagesize=20&sortField=default&sortType=desc&cidLevel=1').then(res => {
            total = res.data.totalPage
            setAlllist(res.data.cidPrdMap[98])
            onScrollFn()
            window.onscroll = onScrollFn;
        })
    }, [GetDate])
    const onScrollFn = useCallback(throttle(() => {
        let scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
        let windowHeight = document.documentElement.clientHeight;
        let scrollHeight = document.body.scrollHeight;
        if (scrollHeight - scrollTop <= windowHeight) {
            pageRef.current++
            setText(true)
            if (pageRef.current === total) {
                setEnd(true)
            }
            GetDate()
        }
    }, 400), [GetDate])
    return <div className="tablist">
        <div className='all'>
            <span>全部商品</span>
            <span className='iconfont icon-sousuoxiao'></span>
        </div>
        <Tabs tyle={{
            '--title-font-size': '13px', '--active-line-color': '#ce4436',
            '--active-title-color': '#ce4436'
        }} activeKey={tabItems[activeIndex].key}
            onChange={changekeyfn}>
            {tabItems.map(item => <Tabs.Tab title={item.title} key={item.key}>
                <div className='productAll'>
                    <div className='wrapper'>
                        {allList.map((item, index) => <div className='subItem' key={index}>
                            <div className='image'><img src={item.picUrl} alt="" /></div>
                            <div className='subTitle'>{item.disPrdName}</div>
                            <div className='submi'>{item.prdBriefName}</div>
                            <div className='product'>￥{item.price}</div>
                        </div>
                        )}
                    </div>
                    <div className='dixian'>
                        {text && !end ? <div className='front'>-加载中-</div> : ''}
                    </div>
                    <div className='dixian'>
                        {end ? <div className='front'>-我是有底线的-</div> : ''}
                    </div>
                </div>
            </Tabs.Tab>)}
        </Tabs>
        <div className='ac'><img src={jiant} alt="" /></div>
    </div>
}
export default TabAllList


